<template>
  <view class="page-container">
    <view class="header-container">
      <view class="left" @click="toBack"><text class="iconfont icon-back"></text></view>
      <view class="center">湖畔景区</view>
      <view class="right">
        <!-- <img src="~@/static/active_detail_slices/fenxiang@3x.png" alt=""> -->
      </view>
    </view>
    <view class="main-container" :style="{
      borderTop: cardRadius < 5 ? '1px solid #f0f0f0' : ''
    }">
      <view class="bg-image">
        <img src="@/static/index_slices/20160824141001_XmEtU.jpeg" alt />
      </view>
      <scroll-view class="card-container" :scroll-y="true" @scroll="onCardScroll">
        <view class="card" :style="{
          borderTopLeftRadius: cardRadius + 'px',
          borderTopRightRadius: cardRadius + 'px'
        }">
          <view class="title">湖畔景区</view>
          <view class="tags-container">
            <view class="tag">4A级景区</view>
            <view class="tag">风景迷人</view>
            <view class="tag">空气清新</view>
          </view>
          <view class="adress-container">
            <view class="label">
              <text class="iconfont icon-dingwei1"></text>
              <text>杭州市阳陂湖景区</text>
            </view>
            <view class="detail">102路、103路</view>
          </view>
          <view class="ticketing-container">
            <text class="iconfont icon-ticket1"></text>
            <text>需购票</text>
            <text class="price">15.00</text>
            <text>元起</text>
          </view>
          <view class="time-container">
            <text class="iconfont icon-clock1"></text>
            <text>8:00-16:00（仅供参考仅供参考仅供参考仅供参考仅供参考仅供参考仅供参考仅供参考仅供参考仅供参考仅供参考仅供参考仅供参考仅供参考仅供参考仅供参考）</text>
          </view>
          <view class="dividing-line"></view>
          <view class="title">
            热门景点
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="footer-container">
      <view class="parking-btn" @click="toParkingLotPage">停车</view>
      <view class="goto-btn">前往</view>
    </view>
  </view>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      cardRadiusMax: 14,
      cardTopMax: 200,
      cardRadius: 14
    }
  },
  methods: {
    onCardScroll({ detail }: any) {
      const i = this.cardRadiusMax / this.cardTopMax;
      this.cardRadius = (this.cardTopMax - detail.scrollTop) * i;
    },
    toParkingLotPage() {
      uni.navigateTo({
        url: "/pages/song/parkingLot"
      });
    },
    toBack() {
      uni.navigateBack({ delta: 1 })
    }
  }
})
</script>
<style scoped>
.page-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header-container {
  color: #333333;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-container .right {
  flex-direction: row-reverse;
}

.header-container .right img {
  width: 16px;
  height: 16px;
}

.header-container .center {
  font-size: 20px;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container {
  flex-grow: 1;
  width: 100%;
  position: relative;
}

.main-container .bg-image {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
}

.main-container .bg-image img {
  width: 100%;
}

.main-container .card-container {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.main-container .card-container >>> .uni-scroll-view-content {
  width: 100%;
  height: calc(100% - 200px);
  padding-top: 200px;
}

.main-container .card-container .card {
  height: calc(100% + 170px);
  padding: 15px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}

.main-container .card-container .card .title {
  color: #333333;
  font-size: 20px;
  margin-bottom: 5px;
}

.main-container .card-container .card .tags-container {
  display: flex;
  margin-bottom: 10px;
}

.main-container .card-container .card .tags-container .tag {
  color: #666666;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 2px;
  background-color: #f9f9f9;
  margin-right: 4px;
}

.main-container .card-container .card .adress-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.main-container .card-container .card .adress-container .label {
  color: #333333;
  font-size: 12px;
  display: flex;
}

.main-container .card-container .card .adress-container .label .iconfont {
  font-size: 10px;
  margin-right: 5px;
  margin-top: 2px;
}

.main-container .card-container .card .adress-container .detail {
  color: #666666;
  font-size: 8px;
  padding-left: 17px;
}

.main-container .card-container .card .ticketing-container {
  display: flex;
  color: #333333;
  font-size: 12px;
  margin-bottom: 10px;
}

.main-container .card-container .card .ticketing-container .iconfont {
  font-size: 10px;
  margin-right: 5px;
  margin-top: 2px;
}

.main-container .card-container .card .time-container {
  display: flex;
  color: #333333;
  font-size: 12px;
}

.main-container .card-container .card .time-container .iconfont {
  font-size: 10px;
  margin-right: 5px;
  margin-top: 2px;
}

.dividing-line {
  height: 1px;
  background-color: #F0F0F0;
  margin: 15px 0px;
}

.footer-container {
  height: 40px;
  padding: 10px 15px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-container .parking-btn {
  font-size: 16px;
  width: 100px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 23px;
  text-align: center;
  margin-right: 8px;
}

.footer-container .goto-btn {
  font-size: 16px;
  color: #FFFFFF;
  flex-grow: 1;
  padding: 10px;
  background-color: #006b65;
  border-radius: 23px;
  text-align: center;
}
</style>